<template>
  <div>
    <form>
      <input type="text" v-model="state2.stu.id">
      <input type="text" v-model="state2.stu.name">
      <input type="text" v-model="state2.stu.age">
      <input type="submit" @click="addStu">
    </form>
    <ul>
      <li v-for="(stu,index) in state.stus" :key="stu.id " @click="remstus(index)">
        {{stu.name}} ---- {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>
// import { ref, reactive } from "vue";
import userAddStudent from "./components/add";
import userRemoveStudent from "./components/rem";
export default {
  name: "App",
  setup() {
    //ref函数注意点
    // ref函数只能监听简单类型的变化
    /* let state = reactive({
      stus: [
        { id: 1, name: "zs", age: 10 },
        { id: 2, name: "ls", age: 20 },
        { id: 3, name: "ww", age: 30 }
      ]
      });
      function remstus(index) {
        state.stus = state.stus.filter((item, idx) => index !== idx);
      }
     
    */
    let { state, remstus } = userRemoveStudent();
    let { state2, addStu } = userAddStudent(state);
    return {
      state,
      remstus,
      state2,
      addStu
    };
  }
};
/*
function userRemoveStudent() {
  let state = reactive({
    stus: [
      { id: 1, name: "zs", age: 10 },
      { id: 2, name: "ls", age: 20 },
      { id: 3, name: "ww", age: 30 }
    ]
  });
  function remstus(index) {
    state.stus = state.stus.filter((item, idx) => index !== idx);
  }
  return {
    state,
    remstus
  };
}
function userAddStudent(state) {
  let state2 = reactive({
    stu: {
      id: "",
      name: "",
      age: ""
    }
  });
  function addStu(e) {
    e.preventDefault();
    const stu = Object.assign({}, state2.stu);
    state.stus.push(stu);
    state2.stu.id = "";
    state2.stu.name = "";
    state2.stu.age = "";
  }
  return { state2, addStu };
}*/
</script>
